<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合案例 随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 100px; width: 100px">
    <img src="img/1.jpg" id="small" style="width: 100px; height: 100px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    let imgs = [
        "img/1.jpg",
        "img/2.jpg",
        "img/3.jpg",
        "img/4.jpg",
        "img/5.jpg",
        "img/6.jpg",];
    //计数器变量
    let num = 0;
    //定时器变量
    let time = null;
    //图片路径
    let imgSrc="";

    //启动绑定单机事件
    $("#startBtn").click(function () {
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        //启用停止按钮
        $("#stopBtn").prop("disabled",false);

        //定义循环计时器
        time = setInterval(function () {
            //获取图片路径
            let index = num % imgs.length;

            //显示随机小图片
            imgSrc = imgs[index];
            $("#small").prop("src",imgSrc);
            num++;
        },6)
    });

    //停止绑定单击事件
    $("#stopBtn").click(function () {
        //取消定时器
        clearInterval(time);
        //启动开始按钮
        $("#startBtn").prop("disabled",false);
        //禁用停止按钮
        $("#stopBtn").prop("disabled",true);

        //将选到的图片放在大图上
        $("#big").prop("src",imgSrc);
        $("#big").prop("style","width: 400px height:500px");
    });
</script>
</html>